<template>
  <div class="page_content daraBoardLint_content flex flex-c">
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">中转站统计</div>
      <div class="dots flex flex-c flex-jc flex-ac">
        <span>.</span>
        <span>.</span>
        <span>.</span>
      </div>
    </div>
    <div class="main_box p-10">
      <!-- highlight-current-row -->
      <el-table ref="singleTable" :data="tableData" max-height="240" style="width: 100%" fit :header-cell-style="{
        color: '#000',
        background: '#f2f2f2',
      }">
        <el-table-column type="index" width="60" label="序号" align="center">
        </el-table-column>
        <el-table-column prop="name" label="中转站名称" align="center" min-width="110">
        </el-table-column>
        <el-table-column prop="date" label="更新时间" align="center">
        </el-table-column>

        <el-table-column prop="address" label="管养状态" width="90" align="center">
          <template #default="scope">
            <el-tag type="success">111</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="联系人" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="110" align="center">
        </el-table-column>
        <el-table-column prop="name" label="进站车次" align="center" width="110">
          <template #default="scope">
            <div class="checi_box">
              1
              <div class="right_you">
                >
                <!-- <i class="el-icon-arrow-right"></i> -->
              </div>
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="default" width="30" fixed="right" align="center">
          <template #default="scope">
            <div>></div>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
const store = useStore();

const props = defineProps<{}>();
onMounted(() => { });
let tableData = [
  {
    date: "2016-05-02",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-04",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-01",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    phone: "15555555555",
  },
  {
    date: "2016-05-03",
    name: "王小虎",
    phone: "15555555555",
  },
];
onBeforeUnmount(() => { });
</script>

<style lang="scss" scoped>
.daraBoardLint_content {
  width: 100%;
  // height: 400px;
  .header_box {}

  .main_box {
    // height: calc(400px - 35px - 20px);
    overflow-y: auto;
  }

  .checi_box {
    position: relative;

    .right_you {
      position: absolute;
      right: -2px;
      top: 0;
      bottom: 0;
      font-weight: 550;
      cursor: pointer;
      padding: 2px 10px;
    }
  }
}
</style>